<template>
    <div class="main">
<el-row>
    <el-col :offset="6" :span="11">
        <div class="problem">{{problem.title}}</div>
        <div class="details">问题描述:{{problem.content}}</div>
        <div class="proIns">
            <div>
                <span class="ins">问题发布时间：{{problem.createTime | timeFormater}}</span>
                <span class="ins">更新时间：{{problem.updateTime | timeFormater}}</span>
            </div>
            <div>
                <span class="ins">回答数量：{{problem.reply}}</span>
                <span class="ins">收藏人数：{{problem.collect}}</span>
                <span class="ins">浏览量：{{problem.visits}}</span>
            </div>
            <div>
                 <el-link type="primary" @click="showReply=true"><i class="el-icon-edit"></i>写回答</el-link>
                 <el-link 
                 type="primary" 
                 @click="collectProblem" 
                 :underline="false"
                 style="margin-left:45px"
                 ><i class="el-icon-star-on"></i>收藏问题</el-link>
            </div>
        </div>
        <el-divider content-position="center">精选回答</el-divider>
        <div class="answer">
            <div class="ans" v-for="hotReply in hotReplies" :key="hotReply.id">
                <div class="user">
                    <el-avatar :size="30" >
                        <img :src="hotReply.userAvatar"/>
                    </el-avatar>
                    <span class="name">{{hotReply.userName}}</span>
                    <span class="pay"
                        @click.stop="pay(hotReply)"
                    ><i class="el-icon-plus" v-show="!hotReply.pay"></i>{{hotReply.pay?'已关注':'关注'}}</span>
                </div>
                <div class="content">
                    {{hotReply.content}}
                </div>
                <div class="ansIns">
                    <span  class="ins">回答创建时间：{{hotReply.createTime | timeFormater}}</span>
                    <span  class="ins">更新时间：{{hotReply.updateTime | timeFormater}}</span>
                    <span  class="ins">点赞数量：{{hotReply.thumbUp?hotReply.thumbUp:0}}</span>
                </div>
                <div class="comment">
                     <span class="com" v-show="!hotReply.comment"><el-link type="primary" @click="showComment(hotReply)">点击展开评论</el-link></span>
                     <span class="com" v-show="hotReply.comment"><el-link type="primary" @click="hiddencomment(hotReply)">点击收起评论</el-link></span>
                    <span  class="com">
                        <el-button type="primary" round plain size="mini" icon="el-icon-thumb" @click="praise(hotReply)">
                            点赞
                        </el-button>
                    </span>
                </div>
                <Comment v-if="hotReply.comment" :replyId="hotReply.id"/>
                <el-divider></el-divider>
            </div>
            <el-divider content-position="center">最新回答</el-divider>
            <div class="ans" v-for="reply in replies" >
                <div class="user">
                    <el-avatar :size="30">
                        <img :src="reply.userAvatar"/>
                    </el-avatar>
                    <span class="name">{{reply.userName}}</span>  
                    <span class="pay"
                        @click.stop="pay(reply)"
                    ><i class="el-icon-plus" v-show="!reply.pay"></i>{{reply.pay?'已关注':'关注'}}</span>
                </div>
                <div class="content">
                    {{reply.content}}
                </div>
                <div class="ansIns">
                    <span class="ins">回答创建时间：{{reply.createTime | timeFormater}}</span>
                    <span class="ins">更新时间：{{reply.updateTime | timeFormater}}</span>
                    <span class="ins">点赞数量：{{reply.thumbUp?reply.thumbUp:0}}</span>
                </div>
                <div class="comment">
                     <span class="com" v-show="!reply.comment"><el-link type="primary" @click="showComment(reply)">点击展开评论</el-link></span>
                     <span class="com" v-show="reply.comment"><el-link type="primary" @click="hiddencomment(reply)">点击收起评论</el-link></span>
                    <span  class="com">
                        <el-button type="primary" round plain size="mini" icon="el-icon-thumb"  @click="praise(reply)">
                           点赞
                        </el-button>
                    </span>
                </div>
                <Comment v-if="reply.comment" :replyId="reply.id"/>
                <el-divider></el-divider>
            </div>
        </div>
        <!-- 弹窗发布回答 -->
        <el-dialog
        :visible.sync="showReply" 
        width="50%"
        :center="true"
        top="20px"
        :destroy-on-close="true">
        <!-- 给组件传值，一个是标识回答的问题id，一个方法，用于发布回答成功的回显 /> -->
        <write-reply :problemId="problemId" :echoReply="echoReply" />
        </el-dialog>
    </el-col>
 </el-row>
    </div>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
import Comment from '../components/comment.vue'
import writeReply from '../components/writeReply.vue'
export default {
  components: { Comment ,writeReply},
    name: 'Problem',

    data() {
        return {
            problem:{}, //问题详情
            replies:[],//所有回答
            hotReplies:[],//精选回答
            // thumUp:'点赞',
            showReply:false,
        };
    },

    mounted() {
        getRequest('/qa/problem/searchProblem/'+this.problemId).then((result) => {
            this.problem = result.problem;
            this.replies = result.replies;
            this.hotReplies = result.hotReplies;
        }).catch((err) => {
            
        });
    },
    props:['problemId'],
    methods: {

        echoReply(reply){
            this.replies.unshift(reply);
        },
        collectProblem(){
            getRequest('/qa/problem/collectProblem/'+this.problemId).then((result) => {
                if(result){
                    this.problem.collect++;
                }
            }).catch((err) => {
                
            });
        },

        // 点赞
        praise(reply){
            getRequest('/qa/like/reply/'+reply.id).then((result) => {
                if(result){//点赞成功
                    reply.thumbUp ++;
                }
            }).catch((err) => {
                
            });
        },
        showComment(reply){
           
             this.$set(reply,'comment',true);
            
        },
        hiddencomment(reply){
            reply.comment = false
        },
        pay(reply){
            if(reply.pay){
                this.$message.warning({message:'已经关注了'})
                return;
            }
            getRequest('/user/follow/followUser/'+reply.userId).then((result) => {
                this.$set(reply,'pay',true);
            }).catch((err) => {
                    
            });
        },
    },
};
</script>

<style  scoped>
.main{
    letter-spacing:2px;
    line-height: 25px;
}
.problem{
    font-size: 19px;
    margin-top:10px ;
}
.details{
    margin-top: 20px;
}
.proIns{
    
}
.ins{
    font-size: 14px;
    margin-right: 25px;
    color: RGB(128,128,128);
}
.com{
    display: inline-block;
    margin-right: 20px ;
}
.comment span{
  margin-top: 5px;
}
.pay,.name{
    position:relative;
    left: 10px;
    top:-10px;
    color: #225599;
    font-size: 15px;
    margin-right: 20px;
}
.pay{
    cursor: pointer;
}
</style>